<template>
    <div>
        <h1> onMounted 用于在组件被挂载到 DOM 之后执行某些逻辑</h1>
        <p>通常用于初始化操作、数据获取、DOM 操作等。onMounted 保证在 DOM 已经渲染完成时被调用，因此适合做一些与 DOM 相关的操作。</p>

        <div class="group">
            <h4>1、数据初始化加载</h4>
            <h2>User List</h2>
            <ul>
                <li v-for="user in users" :key="user.id">{{ users.name }}</li>
            </ul>
        </div>

        <div class="group">
            <h4>2、注册事件监听器</h4>
            <button @click="increment">点击我</button>
            <p>你点击了 {{ count }} 次</p>
        </div>

        <div class="group">
            <h4>3、操作 DOM 元素</h4>
            <input type="text" ref="inputEl" placeholder="聚焦我">
        </div>

        <div class="group">
            <h4>执行动画效果</h4>
            <div ref="box" class="box">你好，世界！</div>
        </div>


        <div class="group">
            <h4>5、第三方库初始化</h4>
            <div id="chart" style="width: 600px;height: 400px; border: 2px solid #ddd;"></div>
        </div>

    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, toHandlerKey } from 'vue'
import * as echarts from 'echarts'

const users = ref<any>([])
const count = ref(0)
const inputEl = ref(null)
const box = ref()


// onMounted(async () => {
//     const response = await fetch('https://jsonplaceholder.typicode.com/users')
//     users.value = await response.json()
// })
// 场景说明: 该组件在 onMounted 中发起 API 请求，获取用户数据，并在 DOM 中展示。


const increment = () => {
    count.value++
    console.log('点击');
}

// const handleKeydown = (e: any) => {
//     if (e.key === 'Enter') {
//         increment()
//     }
// }

// onMounted(() => {
//     window.addEventListener('keydown', handleKeydown)
// })

// onUnmounted(() => {
//     window.removeEventListener('keydown', handleKeydown)
// })
// 场景说明：该组件在 onMounted中监听全局 keydown 事件，当按下回车键时会增加 count，并在组件销毁时移除监听器，避免内存泄漏。

// onMounted(() => {
//     inputEl.value.focus()
// })
// 场景说明：该组件在 onMounted 时自动聚焦到输入框，确保用户在页面加载完成后能直接输入。

// onMounted(() => {
//     box.value.style.transition = 'transform 2s'
//     box.value.style.transform = 'translateX(100px)'
// })

// 场景说明：该组件在 onMounted 后执行一个简单的动画，将一个盒子向后移动100像素。onMounted 确保 DOM 元素已经准备好进行样式和动画的操作。
// 展示了如何在 onMounted 中实现动画效果，确保DOM元素已经加载完成。


onMounted(() => {
    // 初始化 ECharts 图表
    const chart = echarts.init(document.getElementById('chart'))
    const option = {
        title: {
            text: 'ECharts Example'
        },
        tooltip: {},
        xAxis: {
            data: ['Shirt', 'Cardigan', 'Chiffon', 'Pants', 'Heels', 'Socks']
        },
        yAxis: {},
        series: [{
            name: 'Sales',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    }
    chart.setOption(option)
})

// 场景说明，该组件使用了第三方库 ECharts，在 onMounted 中初始化图表，并设置了基本的图表选项。onMounted 保证在组件挂载后，ECharts库可以正确访问 DOM 元素来进行渲染。展示了如何在组件挂载后使用第三方库，如 ECharts，来初始化图表数据。

</script>



<style lang="scss" scoped>
h1 {
    margin-left: 20px;
    margin-top: 20px;
}

.group {
    border: 3px solid deepskyblue;
    margin: 20px;
    padding: 10px;
}

.box {
    width: 100px;
    height: 100px;
    background-color: lightblue;
}
</style>